<template>
  <div>
    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">

      <el-row :gutter="5">
        <!--    分类信息-->
        <el-col :span="5">
          <el-card style="height: 1185px; overflow: auto">
            <div slot="header" class="search-header">
              <div class="show_title">案卷类别：</div>
              <el-input
                v-model="filterText"
                placeholder="搜索分类"
                clearable
                @keyup.enter.native="searchClass"
                class="my_input"
              />
              <div class="button-group">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchClass">搜索</el-button>
              </div>
            </div>
            <el-tree
              v-if="treemainList.length > 0"
              class="filter-tree"
              :data="treemainList"
              :props="{ label: 'indexName', children: 'children' }"
              :default-expand-all="false"
              :filter-node-method="filterNode"
              ref="tree"
              @node-click="handleNodeClick"
              style="margin-top: 10px"
            ></el-tree>
          </el-card>
        </el-col>
        <el-col :span="19">
          <el-row :gutter="5">
            <!--    工程信息-->
            <el-col :span="24">
              <el-card style="height: 400px" v-loading="engLoading">
                <div slot="header" class="search-header">
                  <div class="show_title">工程目录：</div>
                  <el-input v-model="engQueryParams.engname" placeholder="搜索工程" clearable @keyup.enter.native="searchEng"
                            class="my_input"/>
                  <div class="button-group">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="searchEng">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetEng">重置</el-button>
                  </div>
                </div>
                <div class="engs-container" ref="engsContainer">
                  <div class="eng-row" v-for="eng in engList" :key="eng.id" @click="selectEng(eng)"
                       :class="{ selected: eng === selectInfo.selectedEng }">
                    <i class="folder-icon eng-folder-icon"></i>
                    <div slot="reference" class="name-wrapper">
                      <span size="medium" class="folder-name" style="display:inline-block;width:100%;word-wrap:break-word;white-space:normal;">{{ eng.engname }}</span>
                    </div>
                  </div>
                </div>
                <div class="pagination-container">
                  <!-- 分页信息 -->
                  <el-pagination
                    @size-change="handleSizeChangeEng"
                    @current-change="handleCurrentChangeEng"
                    :current-page.sync="engQueryParams.pageNum"
                    :page-size.sync="engQueryParams.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :pager-count="5"
                    :total="engTotal"
                  ></el-pagination>
                </div>
              </el-card>
            </el-col>
            <!--    案卷信息-->
            <el-col :span="16" style="margin-top: 5px">
              <volume-list ref="volumeList" :selectedOneEng="selectInfo.selectedEng" @selectVolume="selectVolume"
                           @resetVolume="resetVolume"></volume-list>
            </el-col>
            <!--    文件信息-->
            <el-col :span="8" style="margin-top: 5px">
              <file-list ref="fileList" :selectedOneVolume="selectInfo.selectedVolume" @selectFile="selectFile"></file-list>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <!--    分类信息--><!--
      <el-col :span="8">
        <el-card style="height: 780px; overflow: auto">
          <div slot="header" class="search-header">
            <div class="show_title">案卷类别：</div>
            <el-input
              v-model="filterText"
              placeholder="搜索分类"
              clearable
              @keyup.enter.native="searchClass"
              class="my_input"
            />
            <div class="button-group">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="searchClass">搜索</el-button>
            </div>
          </div>
          <el-tree
            v-if="treemainList.length > 0"
            class="filter-tree"
            :data="treemainList"
            :props="{ label: 'indexName', children: 'children' }"
            :default-expand-all="false"
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
            style="margin-top: 10px"
          ></el-tree>
        </el-card>
      </el-col>
      &lt;!&ndash;    案卷信息&ndash;&gt;
      <el-col :span="8">
        <volume-list ref="volumeList" :topNode="volumeQueryParams" @selectVolume="selectVolume"
                     @resetVolume="resetVolume"></volume-list>
      </el-col>
      &lt;!&ndash;    文件信息&ndash;&gt;
      <el-col :span="8">
        <file-list ref="fileList" :selectedOneVolume="selectInfo.selectedVolume" @selectFile="selectFile"></file-list>
      </el-col>-->
    </el-row>

    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <el-card>
        <el-row>
          <el-col :span="24" v-show="selectInfo.currentInfo === 'eng'">
            <eng-info :eng-info="selectInfo.selectedEng"/>
          </el-col>
          <el-col :span="24" v-show="selectInfo.currentInfo === 'volume'">
            <volume-info :volume-info="selectInfo.selectedVolume"/>
          </el-col>
          <el-col :span="24" v-show="selectInfo.currentInfo === 'file'">
            <file-info :file-info="selectInfo.selectedFile"/>
          </el-col>
          <el-col :span="24" v-show="selectInfo.currentInfo === ''">
            <el-empty description="无案卷信息"></el-empty>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import VolumeInfo from "@/views/system/search/volumeInfo";
import FileInfo from "@/views/system/search/fileInfo";
import {listTreemain} from "@/api/system/treemain";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import VolumeList from "@/views/system/search/volumelist.vue";
import FileList from "@/views/system/search/filelist.vue";
import {listEngInfo} from "@/api/system/enginfo";
import EngInfo from "@/views/system/search/engInfo.vue";

export default {
  components: {
    EngInfo,
    VolumeList,
    FileList,
    VolumeInfo,
    FileInfo,
  },
  data() {
    return {
      // 类别表格数据
      treemainList: [],
      // 查询参数
      queryParams: {
        parentId: null,
        className: null,
      },
      // 搜索关键字
      filterText: "",
      selectInfo: {
        selectedEng: null,
        selectedVolume: null,
        selectedFile: null,
        currentInfo: "",
      },
      volumeQueryParams: {
        topnode: [],
        vname: null,
      },
      engQueryParams: {
        pageNum: 1,
        pageSize: 20,
        engInfoYuliu4: [],
      },
      engList: [], //工程列表
      engTotal: 0, //工程总数
      engLoading: false,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getList();
  },
  methods: {
    searchClass() {},
    // 查询档案类别列表
    getList() {
      this.loading = true;
      listTreemain(this.queryParams).then(response => {
        this.treemainList = this.handleTree(response.data, "indexId", "parentId");
        this.loading = false;
      });
    },
    // 过滤节点
    filterNode(value, data) {
      if (!value || !data.indexName) return true;
      return data.indexName.indexOf(value) !== -1;
    },
    // 节点点击事件处理
    handleNodeClick(data) {
      // 递归查找所有最小类别节点
      const nodesAndChildren = this.findNodesAndChildren(data);
      // 处理最小类别节点列表，例如打印或进行其他操作
      // if (nodesAndChildren.length === 1) {
      //   this.volumeQueryParams.topnode = nodesAndChildren;
      //   this.selectInfo.currentInfo = "";
      //   this.$refs.fileList.fileList = [];
      // }
      if (nodesAndChildren.length === 1) {
        this.engQueryParams.engInfoYuliu4 = nodesAndChildren[0];
        this.selectInfo.currentInfo = "";
        this.$refs.volumeList.volumeList = [];
        this.$refs.fileList.fileList = [];
        this.getEngList();
      }
    },
    // 递归查找当前节点及其所有子节点
    findNodesAndChildren(node, result = []) {
      // 将当前节点加入结果数组
      result.push(node.id);
      if (node.children && node.children.length > 0) {
        // 如果当前节点有子节点，继续递归查找子节点
        for (const child of node.children) {
          this.findNodesAndChildren(child, result);
        }
      }
      return result;
    },

    //获取工程信息
    getEngList() {
      this.engLoading = true;
      listEngInfo(this.engQueryParams).then((response) => {
        console.log(this.engQueryParams)
        setTimeout(() => {
          this.engList = response.rows;
          this.engTotal = response.total;
          this.engLoading = false;
        }, 300);
      }).catch((error) => {
        this.$message.error("获取工程信息失败:" + error);
        this.engLoading = false;
      });
    },
    searchEng() {
      this.engQueryParams.pageNum = 1;
      this.engQueryParams.pageSize = 20;
      this.getEngList();
    },
    //工程重置选择
    resetEng() {
      this.$refs.volumeList.volumeList = [];
      this.$refs.fileList.fileList = [];
      this.engQueryParams.engname = '';
      this.selectInfo.currentInfo = '';
      this.getEngList();
    },
    //选中工程
    selectEng(eng) {
      this.selectInfo.selectedEng = eng;
      this.selectInfo.currentInfo = "eng";
      this.$refs.fileList.fileList = [];
    },
    handleSizeChangeEng(pageSize) {
      this.engQueryParams.pageSize = pageSize;
      this.getEngList();
    },
    handleCurrentChangeEng(currentPage) {
      this.engQueryParams.pageNum = currentPage;
      this.getEngList();
    },

    //案卷重置选择
    resetVolume() {
      this.selectInfo.currentInfo = "";
      this.$refs.fileList.fileTotal = 0;
      this.$refs.fileList.fileList = [];
    },
    //选中案卷
    selectVolume(volume) {
      this.selectInfo.selectedVolume = volume;
      this.selectInfo.currentInfo = "volume";
    },
    //选中文件
    selectFile(file) {
      this.selectInfo.selectedFile = file;
      this.selectInfo.currentInfo = "file";
    },
  },
};
</script>

<style>
.search-header {
  display: flex;
  align-items: center;
}

.show_title {
  font-weight: bold;
  font-size: 20px;
  color: rgb(26, 115, 198);
}

.my_input {
  margin-left: auto;
  width: 37%;
}

.newTree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  /* 设置背景颜色 */
  background-color:#ffffff; /* 透明度为0.2的skyblue */
  /* 设置节点字体颜色 */
  color: #409eff;
  /* 设置字体加粗 */
  font-weight: bold;
  white-space: normal;
  display: inline-block;
  word-wrap: break-word;
}

.custom-tree .el-tree-node__content {
  white-space: normal;
  display: inline-block;
  word-wrap: break-word;
  /*display: flex;*/
  /*align-items: center;*/
}

.button-group {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.engs-container {
  height: 600px;
  overflow-y: auto;
}

.eng-row {
  flex-basis: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.eng-row:hover {
  cursor: pointer;
  background-color: #e5f3ff;
}

.pagination-container {
  margin-top: 10px;
}

.folder-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background-size: cover;
}

.folder-name {
  flex-grow: 1;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.volume-folder-icon {
  background-image: url("~@/assets/icons/folder/volume-icon.png");
}

.file-folder-icon {
  background-image: url("~@/assets/icons/folder/file-icon.png");
}

/* 选中状态的样式 */
.selected {
  /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);*/
  background-color: #cce8ff;
}
</style>
